<template>
  <div>
    <div class="hd">
      <div class="avatar">
        <img src alt>
      </div>
      <div class="alias">
        <p>昵称：帅哥/美女</p>
        <p>id:89757</p>
      </div>
      <div class="account" v-show="!loginFlag">
        <router-link to="/member/login">登录</router-link>
        <span>/</span>
        <router-link to="/member/register">注册</router-link>
      </div>
    </div>
    <div class="order">
      <span>我的订单</span>
      <div class="order-box">
        <div>
          <div class="imgBox"></div>
          <div>待付款</div>
        </div>
        <div>
          <div class="imgBox"></div>
          <div>待发货</div>
        </div>
        <div>
          <div class="imgBox"></div>
          <div>待收货</div>
        </div>
        <div>
          <div class="imgBox"></div>
          <div>待评价</div>
        </div>
        <div>
          <div class="imgBox"></div>
          <div>退款/售后</div>
        </div>
      </div>
    </div>
    <div class="setting">
      <span>我的设置</span>
      <div class="setting-box">
        <div class="setting-cell" v-show="loginFlag">
          <router-link to="/member/addressList" tag="div">地址管理</router-link>
        </div>
        <div class="setting-cell" v-show="loginFlag">
          <router-link to="/member/changePass" tag="div">修改密码</router-link>
        </div>
        <div class="setting-cell">
          <div>关于</div>
        </div>
      </div>
    </div>
    <div class="logout">
        <mt-button size="large" @click="logout">退出登录</mt-button>
    </div>
  </div>
</template>

<script>
import mui from "../../lib/mui/js/mui.min.js"
export default {
  data() {
    return {
      title: "个人中心",
      timerId:"",
      loginFlag:""
    }
  },
  created(){
    this.logStatus()
    this.showTitle(this.title)
  },
  methods: {
    showTitle(title) {
      this.$emit("getTitle", title);
    },
    logStatus(){
      this.loginFlag = localStorage.getItem("login")? true:false;
    },
    
    logout(){
      clearTimeout(this.timerId)
      mui.confirm("是否确认退出",(message)=>{
        if(message.index == 1){
          localStorage.removeItem("login");
          mui.alert("退出成功",(message)=> {
            if(message.index == 0){
              location.reload();
            }
          })
          this.timerId = setTimeout(()=>{
            location.reload();
          },1200)
          
        } 
      })
      
    }
  }
};
</script>

<style lang="scss" scoped>
*{
  overflow-y: auto
}
.hd {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 20px 20px;
  position: relative;
  .avatar {
    height: 80px;
    width: 80px;
    background: #fff;
    border-radius: 50%;
  }
  .alias {
    padding: 15px 0 0 20px;
    p:first-of-type {
      color: #000;
    }
  }
  .account{
      padding: 15px 0 0 20px;
      font-size: 14px;
      position: absolute;
      top: 0;
      right: 0;
  }
}
.order {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 10px #bbb;
  padding: 10px 0;
  span {
    margin: 10px 20px;
  }
  .order-box {
    display: flex;
    flex-direction: row;
    flex-flow: nowrap;
    margin-top: 10px;
    font-size: 14px;
    div {
      flex: 20%;
      text-align: center;
      .imgBox {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
      &:nth-of-type(1) .imgBox {
        background: red;
      }
      &:nth-of-type(2) .imgBox {
        background: orange;
      }
      &:nth-of-type(3) .imgBox {
        background: green;
      }
      &:nth-of-type(4) .imgBox {
        background: yellow;
      }
      &:nth-of-type(5) .imgBox {
        background: plum;
      }
    }
  }
}

.setting{
    margin: 10px 0px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 10px #bbb;
    padding: 10px 20px;
    
    .setting-box {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        .setting-cell{
            padding: 10px;
            border-bottom: 1px solid #eee;
            &:first-of-type {
                border-top: 1px solid #eee;
            }
        }
    }
}
</style>